/**
 * 工厂页入库达成率图表组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import http from '@/axios/http'
import adaptivePx from '@/utils/adaptivePx'

const route = useRoute()
const factory = ref(route.query.factory)

const main = ref()
const warehousingChart = ref()
let myChart = null

const date = new Date()
const lastYear = (date.getFullYear() - 1) + '年'
const thisTarget = String(date.getFullYear()).substring(2) + '年目标'
const thisYear = date.getFullYear() + '年'

async function getWarehousingChart() {
  await http.post('/factory/getWarehousingChart', {
    factory: factory.value
  }).then(res => {
    warehousingChart.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function init() {
  myChart = echarts.init(main.value, null, { renderer: 'svg'})

  let option = {
    title: {
      text: '标准秒值⭐',
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(16),
        fontWeight: 'normal'
      },
      left: '2%',
      top: '2%'
    },
    color: ['#1e90ff', '#6a43ff', '#2fa8c3'],
    legend: {
      textStyle: {
        color: 'white',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      top: '2%',
      right: '2%',
      data: [lastYear, thisTarget, thisYear]
    },
    grid: {
      left: '3%',
      top: '27%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      axisLabel: {
        color: 'white',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      data: warehousingChart.value.month
    },
    yAxis: {
      axisLabel: {
        color: 'white',
        fontSize: adaptivePx(12),
        fontWeight: 'normal'
      },
      axisLine: {
        lineStyle: {
          type: 'solid'
        },
        show: true
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#666'
        },
        show: true
      }
    },
    series: [
      {
        name: lastYear,
        type: 'bar',
        data: warehousingChart.value.lastWarehousingChart,
        markPoint: {
          symbol: warehousingChart.value.lastWarehousingChart[warehousingChart.value.lastWarehousingChart.length - 1] > 0 ? 'pin' : 'none',
          symbolSize: adaptivePx(60),
          label: {
            color: 'white',
            fontSize: adaptivePx(12),
            fontWeight: 'normal'
          },
          data: [
            {
              name: 'Total',
              coord: [warehousingChart.value.lastWarehousingChart.length - 1, warehousingChart.value.lastWarehousingChart[warehousingChart.value.lastWarehousingChart.length - 1]],
              value: warehousingChart.value.lastWarehousingChart[warehousingChart.value.lastWarehousingChart.length - 1]
            }
          ]
        }
      },
      {
        name: thisTarget,
        type: 'bar',
        data: warehousingChart.value.targetWarehousingChart
      },
      {
        name: thisYear,
        type: 'bar',
        data: warehousingChart.value.thisWarehousingChart,
        markPoint: {
          symbol: warehousingChart.value.thisWarehousingChart[warehousingChart.value.thisWarehousingChart.length - 1] > 0 ? 'pin' : 'none',
          symbolSize: adaptivePx(60),
          label: {
            color: 'white',
            fontSize: adaptivePx(12),
            fontWeight: 'normal'
          },
          data: [
            {
              name: 'Total',
              coord: [warehousingChart.value.thisWarehousingChart.length - 1, warehousingChart.value.thisWarehousingChart[warehousingChart.value.thisWarehousingChart.length - 1]],
              value: warehousingChart.value.thisWarehousingChart[warehousingChart.value.thisWarehousingChart.length - 1]
            }
          ]
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        axis: 'x',
      },
      textStyle: {
        color: 'black',
        fontSize: adaptivePx(14),
        fontWeight: 'normal'
      },
      backgroundColor: 'rgba(171, 182, 212, 0.9)',
      borderWidth: 0,
      formatter: function (params) {
        let content = `
          ${ params[0].axisValue }<br>
        `

        if (params[0]) {
          if (params[0].seriesName === lastYear) {
            content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #1e90ff;"></div>&nbsp;
            `
          } else if (params[0].seriesName === thisTarget) {
            content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #6a43ff;"></div>&nbsp;
            `
          } else if (params[0].seriesName === thisYear) {
            content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #2fa8c3;"></div>&nbsp;
            `
          }
          content += `
            ${ params[0].seriesName === lastYear ? '去年' : (params[0].seriesName === thisTarget ? '目标' : '今年') }&emsp;${ params[0].value ? params[0].value.toLocaleString() : '-' }&nbsp;&nbsp;<br>
          `
        }

        if (params[1]) {
          if (params[1].seriesName === thisTarget) {
            content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #6a43ff;"></div>&nbsp;
            `
          } else if (params[1].seriesName === thisYear) {
            content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #2fa8c3;"></div>&nbsp;
            `
          }
          content += `
            ${ params[1].seriesName === lastYear ? '去年' : (params[1].seriesName === thisTarget ? '目标' : '今年') }&emsp;${ params[1].value ? params[1].value.toLocaleString() : '-' }&nbsp;&nbsp;
          `
        }

        if (params[0] && params[1] && params[0].value && params[1].value) {
            let diff = params[1].value - params[0].value
            if (diff > 0) {
              content += `
            <span style="color: blue;">+${ diff.toLocaleString() }</span>
              `
            }
            if (diff < 0) {
              content += `
            <span style="color: red;">${ diff.toLocaleString() }</span>
              `
            }
        }

        if (params[0] && params[1] && params[2]) {
          content += `
            <br>
          `
        }

        if (params[2]) {
          content += `
            <div style="display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: #2fa8c3;"></div>&nbsp;
            ${ params[2].seriesName === lastYear ? '去年' : (params[2].seriesName === thisTarget ? '目标' : '今年') }&emsp;${ params[2].value ? params[2].value.toLocaleString() : '-' }&nbsp;&nbsp;
          `
        }
        
        if (params[0] && params[2] && params[0].value && params[2].value) {
            let diff = params[2].value - params[0].value
            if (diff > 0) {
              content += `
            <span style="color: blue;">+${ diff.toLocaleString() }</span>
              `
            }
            if (diff < 0) {
              content += `
            <span style="color: red;">${ diff.toLocaleString() }</span>
              `
            }
        }
        
        return content
      }
    }
  }

  myChart.setOption(option)

  myChart.on('legendselectchanged', () => {
    event.stopPropagation()
  })
}

function myChartResize() {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(async () => {
  await getWarehousingChart()
  init()
  
  window.addEventListener('resize', myChartResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', myChartResize)
})
</script>

<template>
  <div id="factory-warehousing-chart" ref="main"></div>
</template>

<style lang="scss" scoped>
#factory-warehousing-chart {
  width: 100%;
  height: 100%;
}
</style>